<template>
	<div id="app">
		<div id="homepage">
			<el-container>
				<!-- 左侧导航栏 -->
				<el-aside :width="!isCollapse?'200px':'60px'" v-if="pawoi">
					<div class="left_nav">
						<el-menu :default-active="$route.path" router class="el-menu-vertical-demo"
							:unique-opened="true" :collapse="isCollapse" text-color="#cdd2da"
							background-color="#304156">
							<el-menu-item index="/index/main">
								<i class="el-icon-s-home"></i>
								<span slot="title">首页</span>
							</el-menu-item>
							<el-submenu :index="item.name" v-for="(item,index) in list" :key="item.id">
								<template slot="title">
									<i :class="item.loc"></i>
									<span slot="title">{{item.name}}</span>
								</template>
								<el-menu-item-group v-for="(obj,index) in item.children" :key="obj.id">
									<el-menu-item :index="obj.path">{{obj.name}}</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</div>
				</el-aside>
				<!-- 顶部功能区 -->
				<el-scrollbar>
				<el-container>
					<el-header v-if="pawoi">
						<el-breadcrumb separator="/">
							<!-- 导航栏控制 -->
							<div class="btn" @click="szhan" :class="isCollapse==false?'fanz':''"><i class="el-icon-s-fold"></i></div>
							<!-- 面包屑 -->
							<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item v-if="tito!=''">{{tito}}</el-breadcrumb-item>
							<el-breadcrumb-item v-if="pato!=''">{{pato}}</el-breadcrumb-item>
						</el-breadcrumb>
						<!-- 其他功能区 -->
						<div class="h_right">
							<el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
								<i class="el-icon-full-screen"></i>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="布局大小" placement="bottom">
								<i class="el-icon-rank"></i>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="通知中心" placement="bottom">
								<i class="el-icon-bell"></i>
							</el-tooltip>
							<el-dropdown trigger="click" @command="handleCommand">
								<span class="el-dropdown-link">
									<img src="./assets/download.gif">
									<i class="el-icon-caret-bottom"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="first">首页</el-dropdown-item>
									<el-dropdown-item command="second">密码修改</el-dropdown-item>
									<el-dropdown-item command="third">退出</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</el-header>
					<!-- tab栏切换区域 -->
					<div class="zhujian" v-if="pawoi">
						<humanIK :Data="Data" :djwwiu="djwwiu"></humanIK>
					</div>
					<!-- 视图区 -->
					<el-main>
						<keep-alive>
							<transition name="fade" mode="out-in">
								<router-view style="padding: 20px;"></router-view>
							</transition>
						</keep-alive>
					</el-main>
				</el-container>
				</el-scrollbar>
			</el-container>
		</div>

	</div>
</template>

<script>
	import humanIK from './components/HumanIK.vue'
	export default {
		components: {
			humanIK//组件
		},
		updated() {
			this.list = global.antRouter
		},
		computed: {
			breadList() {
				return this.$route.matched
			}
		},
		data() {
			return {
				tito: '',
				pato: '',
				djwwiu: ["首页"],//首页
				Data: ["/index/main"],//首页路由
				isCollapse: false,
				list: [],
				pawoi: true,
			}
		},
		watch: {
			$route(to, from) {
				if (to.path == '/login') {
					this.pawoi = false
				} else {
					this.pawoi = true
				}
				this.Data.push(this.$route.path)
				let patha = new Set(this.Data)
				this.Data = Array.from(patha)
				if (this.$route.meta.title != '刷新'&&this.$route.meta.title != '登录') {
					this.djwwiu.push(this.$route.meta.title)
				}
				let tagnum = new Set(this.djwwiu)
				this.djwwiu = Array.from(tagnum)
				if (this.$route.matched[1].meta.title != '首页') {
					this.tito = this.$route.matched[0].meta.title
					this.pato = this.$route.matched[1].meta.title
				} else {
					this.tito = ''
					this.pato = ''
				}
			},
		},
		methods: {
			//导航栏控制
			szhan() { 
				this.isCollapse = !this.isCollapse
			},
			// 退出登录
			handleCommand(fixedRouter) {
				if (fixedRouter == 'third') {
					sessionStorage.removeItem("name");
					this.$router.push({
						path: '/login'
					})
				}
			},
		}
	}
</script>

<style lang="less">
	html,
	body,
	#app {
		margin: 0px;
		padding: 0px;
		height: 100%;
		overflow: hidden;
	}
	/* 左侧导航栏 */
	#homepage .el-aside {
		height: 100vh;
		transition: width 0.5s;
		background-color: #304156;
	}

	#homepage .left_nav {
		height: 100vh;
		position: fixed;
		overflow-y: scroll !important;
		overflow: hidden;
	}

	#homepage .el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}

	#homepage .el-menu-item-group__title {
		padding: 0px;
	}

	#homepage .el-submenu__title span {
		margin-right: 90px;
	}

	#homepage .el-menu {
		border: none;
		height: 100%;
	}
	#homepage .left_nav::-webkit-scrollbar {
		width: 0;
	}
 #homepage .el-scrollbar {
		width: 100%;
		height: 100vh;
	}
	#homepage .el-scrollbar__wrap {
		overflow-x: hidden !important;
	}
	/* 顶部功能区 */
	#homepage .el-header {
		margin-left: 3px;
		display: flex;
		padding-left: 10px;
		border-bottom: #CCCCCC 1px solid;
	}
	/* 导航栏控制 */
	#homepage .btn {
		float: left;
		height: 50px;
		display: inline-block;
		cursor: pointer;
		font-size: 25px;
		margin-right: 20px;
		font-weight: bold;
	}
	#homepage .fanz {
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

	/* 面包屑 */
	#homepage .el-breadcrumb {
		line-height: 60px;
		width: 45%;
	}

	#homepage .el-dropdown-link img {
		width: 40px;
		height: 40px;
		vertical-align: middle;
		border-radius: 5px;
		background-color: #64d9d6;
	}
	/* 其他功能区 */
	#homepage .h_right {
		text-align: right;
		line-height: 60px;
		width: 55%;
	}

	#homepage .h_right i {
		margin: 0px 10px;
	}

	/* 顶tab栏切换区域 */
	#homepage .zhujian {
		margin-left: 3px;
		height: 40px !important;
		line-height: 40px;
		border-bottom: #CCCCCC 1px solid;
	}
	/* 视图区 */
	#homepage .el-main {
		padding: 0px;
	}
	

</style>
